<template>
  <div id="areaChartA" ref="areaChartA" style="width: 100%; height: 350px;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    name: 'AreaChartA',
    props: ['echartsData'],
    data() {
      return {
        dataListX: [],
        dataListY: []
      };
    },
    mounted() {
      this.dataListX = this.echartsData.map(item => item.outDate);
      this.dataListY = this.echartsData.map(item => item.outTotal);
      this.initChart();
    },
    watch: {
      echartsData(newData) {
        this.dataListX = newData.map(item => item.outDate);
        this.dataListY = newData.map(item => item.outTotal);
        this.initChart();
      }
    },
    methods: {
      initChart() {
        const myChart = echarts.init(this.$refs.areaChartA);
        const option = {
          title: {
            text: '近12天每天的出库数量',
            textStyle: {
              color: '#333',
              fontSize: 16,
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['出库量'],
            right: '10%',
            textStyle: {
              color: '#333'
            }
          },
          grid: {
            left: '0',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dataListX,
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            axisLabel: {
              color: '#333',
              interval: 0, // 强制显示所有标签
              rotate: 20, // 旋转标签，避免重叠
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: ['#eee']
              }
            },
            axisLabel: {
              color: '#333'
            }
          },
          series: [{
            name: '出库量',
            type: 'line',
            smooth: true,
            smoothMonotone: 'x',
            stack: 'Total',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#67B9E5'
                },
                {
                  offset: 1,
                  color: '#CDEAFD'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.dataListY
          }]
        };

        myChart.setOption(option);

        // Resize the chart when the window size changes
        window.addEventListener('resize', () => {
          myChart.resize();
        });
      }
    }
  };
</script>

<style scoped>
  /* 图表容器的样式 */
  #areaChartA {
    width: 100%;
    height: 350px;
  }
</style>
